<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小方块阵列🔥</title>
  <style>
    /* #div1 {
      width: 500px;
      height: 500px;
      background: rgb(153, 62, 62);
    } */

    body {
      background: #000;
    }

    #container {
      width: 600px;
      margin: 100px auto;
      display: flex;
      flex-wrap: wrap;
    }

    .square {
      width: 10px;
      height: 10px;
      background: rgba(74, 73, 73, 0.555);
      margin-bottom: 2px;
      margin-right: 2px;
      transition-duration: 1s;
    }

    .square:hover {
      transition-duration: 0s;
    }
  </style>
</head>

<body>
  <!-- <div id="div1"></div> -->
  <div class="container" id="container">
  </div>


  <script>

    generateSquare()

    //生成一个小方块阵列，并且给每个小方块绑定鼠标移入和移出事件
    function generateSquare() {
      const oContainer = document.getElementById("container");
      for (let i = 0; i < 3000; i++) {
        const square = document.createElement("div");
        square.className = "square"
        oContainer.appendChild(square)
      }
      oContainer.onmouseover = function (e) {
        if (e.target.className == "square") {
          setColor(e.target)
        }
      }
      oContainer.onmouseout = function (e) {
        if (e.target.className == "square") {
          deleteColor(e.target)
        }
      }
      //your complement
    }
    //这个函数实现设置小方块颜色，并且绑定到鼠标移入事件
    function setColor(element) {
      function getNum() {
        return Math.floor(Math.random() * 256)
      }
      element.style.backgroundColor = `rgb(${getNum()},${getNum()},${getNum()})`
    }

    //这个函数实现去除小方块颜色，并且绑定到鼠标移出事件
    function deleteColor(element) {
      // element.style.transitionDuration = '1s'
      element.style.backgroundColor = ''
    }

    // const oDiv1 = document.getElementById("div1")
    // oDiv1.onmouseover = function (e) {
    //   console.log('划入');
    // }
    // oDiv1.onmouseout = function (e) {
    //   console.log('划出');
    // }
  </script>
</body>

</html>